<template>
	<view class="coupon-selector">
		<view class="selector-header" @click="toggleSelector">
			<view class="header-left">
				<text class="label">优惠券</text>
				<text class="selected-text" v-if="selectedCoupon">
					已选择：{{ selectedCoupon.amount }}元券
				</text>
				<text class="placeholder" v-else>
					选择优惠券
				</text>
			</view>
			<view class="header-right">
				<text class="arrow" :class="{ 'arrow-up': showSelector }">></text>
			</view>
		</view>

		<!-- 优惠券选择面板 -->
		<view class="selector-panel" v-if="showSelector">
			<view class="panel-header">
				<text class="panel-title">可用优惠券</text>
				<text class="panel-subtitle">订单满{{ minAmount }}元可用</text>
			</view>

			<scroll-view class="coupon-list" :scroll-y="true">
				<view 
					class="coupon-item" 
					v-for="coupon in availableCoupons" 
					:key="coupon.id"
					:class="{ 'selected': selectedCoupon && selectedCoupon.id === coupon.id }"
					@click="selectCoupon(coupon)"
				>
					<view class="coupon-left">
						<view class="coupon-amount">
							<text class="currency">￥</text>
							<text class="amount">{{ coupon.amount }}</text>
						</view>
						<view class="coupon-condition">满{{ coupon.threshold }}元可用</view>
					</view>
					<view class="coupon-right">
						<view class="coupon-title">{{ coupon.title }}</view>
						<view class="coupon-scope">{{ coupon.scope }}</view>
						<view class="coupon-date">{{ coupon.endDate }}前有效</view>
					</view>
					<view class="coupon-checkbox">
						<view class="checkbox" :class="{ 'checked': selectedCoupon && selectedCoupon.id === coupon.id }">
							<text class="checkmark" v-if="selectedCoupon && selectedCoupon.id === coupon.id">✓</text>
						</view>
					</view>
				</view>

				<view class="no-coupon" v-if="availableCoupons.length === 0">
					<text class="no-coupon-text">暂无可用优惠券</text>
				</view>
			</scroll-view>

			<view class="panel-footer">
				<button class="confirm-btn" @click="confirmSelection" :disabled="!selectedCoupon">
					确认选择
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import couponService from '../services/couponService.js';

	export default {
		name: 'CouponSelector',
		props: {
			orderAmount: {
				type: Number,
				required: true
			},
			category: {
				type: String,
				default: null
			},
			value: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				showSelector: false,
				availableCoupons: [],
				selectedCoupon: null,
				loading: false
			}
		},
		computed: {
			minAmount() {
				if (this.availableCoupons.length === 0) return 0;
				return Math.min(...this.availableCoupons.map(c => c.threshold));
			}
		},
		watch: {
			value: {
				handler(newVal) {
					this.selectedCoupon = newVal;
				},
				immediate: true
			},
			orderAmount: {
				handler() {
					if (this.showSelector) {
						this.loadAvailableCoupons();
					}
				}
			}
		},
		methods: {
			toggleSelector() {
				this.showSelector = !this.showSelector;
				if (this.showSelector) {
					this.loadAvailableCoupons();
				}
			},
			
			async loadAvailableCoupons() {
				if (this.loading) return;
				
				this.loading = true;
				try {
					const coupons = await couponService.getAvailableCoupons(this.orderAmount, this.category);
					this.availableCoupons = coupons || [];
				} catch (error) {
					console.error('加载可用优惠券失败:', error);
					uni.showToast({
						title: error.message || '加载优惠券失败',
						icon: 'none'
					});
					this.availableCoupons = [];
				} finally {
					this.loading = false;
				}
			},
			
			selectCoupon(coupon) {
				if (this.selectedCoupon && this.selectedCoupon.id === coupon.id) {
					this.selectedCoupon = null;
				} else {
					this.selectedCoupon = coupon;
				}
			},
			
			confirmSelection() {
				if (!this.selectedCoupon) {
					uni.showToast({
						title: '请选择优惠券',
						icon: 'none'
					});
					return;
				}
				
				this.$emit('input', this.selectedCoupon);
				this.$emit('change', this.selectedCoupon);
				this.showSelector = false;
				
				uni.showToast({
					title: '优惠券选择成功',
					icon: 'success'
				});
			},
			
			// 重置选择
			reset() {
				this.selectedCoupon = null;
				this.$emit('input', null);
				this.$emit('change', null);
			}
		}
	}
</script>

<style scoped>
	/* 优惠券选择器样式 */
	.coupon-selector {
		background: #fff;
		border-radius: 0;
		margin: 12px;
		overflow: visible;
		border: 2px solid #e3f2fd;
		position: relative;
	}
	
	/* 穿孔边缘效果 */
	.coupon-selector::before,
	.coupon-selector::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 6px;
		background-image: 
			radial-gradient(circle at 8px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 24px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 40px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 56px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 72px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 88px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 104px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 120px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 136px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 152px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 168px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 184px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 200px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 216px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 232px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 248px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 264px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 280px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 296px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 312px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 328px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 344px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px),
			radial-gradient(circle at 360px 3px, transparent 0, transparent 2px, #fff 2px, #fff 3px);
		background-size: 16px 6px;
		background-repeat: repeat-x;
		z-index: 1;
	}
	
	.coupon-selector::before {
		top: -3px;
	}
	
	.coupon-selector::after {
		bottom: -3px;
	}
	
	/* 左侧半圆形切口 */
	.coupon-selector::before {
		content: '';
		position: absolute;
		left: -20px;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		background: #f7f8fa;
		border-radius: 50%;
		z-index: 2;
	}
	
	.coupon-selector::after {
		content: '';
		position: absolute;
		right: -20px;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		background: #f7f8fa;
		border-radius: 50%;
		z-index: 2;
	}
	
	.selector-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
		border-bottom: 1px solid #e3f2fd;
		background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
		z-index: 3;
		position: relative;
	}
	
	.header-left {
		flex: 1;
	}
	
	.label {
		font-size: 16px;
		color: #1976d2;
		font-weight: 500;
		margin-right: 12px;
	}
	
	.selected-text {
		font-size: 14px;
		color: #1976d2;
	}
	
	.placeholder {
		font-size: 14px;
		color: rgba(25, 118, 210, 0.7);
	}
	
	.arrow {
		font-size: 16px;
		color: #1976d2;
		transform: rotate(90deg);
		transition: transform 0.3s;
	}
	
	.arrow-up {
		transform: rotate(-90deg);
	}
	
	.selector-panel {
		border-top: 1px solid #e3f2fd;
		background: #fff;
		z-index: 3;
		position: relative;
	}
	
	.panel-header {
		padding: 16px;
		background: linear-gradient(135deg, #f3f8ff 0%, #e8f4fd 100%);
		border-bottom: 1px solid #e3f2fd;
	}
	
	.panel-title {
		font-size: 16px;
		color: #1976d2;
		font-weight: 600;
		display: block;
		margin-bottom: 4px;
	}
	
	.panel-subtitle {
		font-size: 12px;
		color: rgba(25, 118, 210, 0.7);
	}
	
	.coupon-list {
		max-height: 300px;
		padding: 0 16px;
	}
	
	.coupon-item {
		display: flex;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid #e3f2fd;
		transition: all 0.2s;
	}
	
	.coupon-item:last-child {
		border-bottom: none;
	}
	
	.coupon-item.selected {
		background: rgba(25, 118, 210, 0.05);
		border-radius: 0;
		margin: 0 -16px;
		padding: 16px;
		border-left: 4px solid #1976d2;
	}
	
	.coupon-left {
		width: 80px;
		text-align: center;
		margin-right: 16px;
	}
	
	.coupon-amount {
		display: flex;
		align-items: baseline;
		justify-content: center;
		margin-bottom: 4px;
	}
	
	.currency {
		font-size: 12px;
		color: #1976d2;
		margin-right: 2px;
	}
	
	.amount {
		font-size: 24px;
		color: #1976d2;
		font-weight: 700;
	}
	
	.coupon-condition {
		font-size: 11px;
		color: rgba(25, 118, 210, 0.7);
	}
	
	.coupon-right {
		flex: 1;
		margin-right: 16px;
	}
	
	.coupon-title {
		font-size: 14px;
		color: #1976d2;
		font-weight: 500;
		margin-bottom: 4px;
	}
	
	.coupon-scope {
		font-size: 12px;
		color: rgba(25, 118, 210, 0.7);
		margin-bottom: 4px;
	}
	
	.coupon-date {
		font-size: 11px;
		color: rgba(25, 118, 210, 0.6);
	}
	
	.coupon-checkbox {
		width: 24px;
		height: 24px;
	}
	
	.checkbox {
		width: 20px;
		height: 20px;
		border: 2px solid #e3f2fd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s;
	}
	
	.checkbox.checked {
		border-color: #1976d2;
		background: #1976d2;
	}
	
	.checkmark {
		color: #fff;
		font-size: 12px;
		font-weight: bold;
	}
	
	.no-coupon {
		padding: 40px 0;
		text-align: center;
	}
	
	.no-coupon-text {
		font-size: 14px;
		color: rgba(25, 118, 210, 0.5);
	}
	
	.panel-footer {
		padding: 16px;
		border-top: 1px solid #e3f2fd;
	}
	
	.confirm-btn {
		width: 100%;
		height: 44px;
		background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
		color: #fff;
		border: none;
		border-radius: 0;
		font-size: 16px;
		font-weight: 500;
	}
	
	.confirm-btn:disabled {
		background: #e3f2fd;
		color: rgba(25, 118, 210, 0.5);
	}
</style> 